<template>
    <div class="list-box">
        <div class="page" :style="{height:+(1269*countHeight)+'px'}">
            <div v-for="(item,index) in List" :key="index" class="box">
                <div class="page-box">
                    <div class="box-img">
                        <img :src="item.imgSrc" alt="">
                        <img :src="item.imgSrc2" alt="">
                        <img :src="item.imgSrc3" alt="">
                    </div>
                    <div class="box-bg">
                        <h1>{{ item.name }}</h1>
                        <h5>{{ item.time }}</h5>
                        <p>{{ item.content }}</p>
                    </div>
                </div>
                <div class="page-box2">
                    <div class="box-img2">
                        <img :src="item.imgSrc_1" alt="">
                        <img :src="item.imgSrc_2" alt="">
                        <img :src="item.imgSrc_3" alt="">
                    </div>
                    <div class="box-bg2">
                        <h1>{{ item.name2 }}</h1>
                        <h5>{{ item.time2 }}</h5>
                        <p>{{ item.content2 }}</p>
                    </div>
                </div>
            </div>
        </div>
        <div class="page-more" ref="more">
            <div @click="showMore">MORE</div>
        </div>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                List: [{
                    name: "吉赛尔·邦辰",
                    time: "2021.10.1",
                    content: "1993年，13岁的吉赛尔·邦辰参加了在圣保罗的模特训练课程，在一个百货大楼里被发掘。1996年，在西班牙举行的“世界小姐”选美大赛中，吉赛尔·邦辰获得第四名。1997年，吉赛尔·邦辰搬到了纽约，开始了自己的模特。",
                    imgSrc: require("../../assets/jisaier.jpg"),
                    imgSrc2: require("../../assets/jisaier2.jpg"),
                    imgSrc3: require("../../assets/jisaier3.jpg"),
                    name2: "吉赛尔·邦辰",
                    time2: "2021.10.1",
                    content2: "1993年，13岁的吉赛尔·邦辰参加了在圣保罗的模特训练课程，在一个百货大楼里被发掘。1996年，在西班牙举行的“世界小姐”选美大赛中，吉赛尔·邦辰获得第四名。1997年，吉赛尔·邦辰搬到了纽约，开始了自己的模特。",
                    imgSrc_1: require("../../assets/jisaier.jpg"),
                    imgSrc_2: require("../../assets/jisaier2.jpg"),
                    imgSrc_3: require("../../assets/jisaier3.jpg"),
                },{
                    name: "吉赛尔·邦辰",
                    time: "2021.10.1",
                    content: "1993年，13岁的吉赛尔·邦辰参加了在圣保罗的模特训练课程，在一个百货大楼里被发掘。1996年，在西班牙举行的“世界小姐”选美大赛中，吉赛尔·邦辰获得第四名。1997年，吉赛尔·邦辰搬到了纽约，开始了自己的模特。",
                    imgSrc: require("../../assets/jisaier.jpg"),
                    imgSrc2: require("../../assets/jisaier2.jpg"),
                    imgSrc3: require("../../assets/jisaier3.jpg"),
                    name2: "吉赛尔·邦辰",
                    time2: "2021.10.1",
                    content2: "1993年，13岁的吉赛尔·邦辰参加了在圣保罗的模特训练课程，在一个百货大楼里被发掘。1996年，在西班牙举行的“世界小姐”选美大赛中，吉赛尔·邦辰获得第四名。1997年，吉赛尔·邦辰搬到了纽约，开始了自己的模特。",
                    imgSrc_1: require("../../assets/jisaier.jpg"),
                    imgSrc_2: require("../../assets/jisaier2.jpg"),
                    imgSrc_3: require("../../assets/jisaier3.jpg"),
                },{
                    name: "吉赛尔·邦辰",
                    time: "2021.10.1",
                    content: "1993年，13岁的吉赛尔·邦辰参加了在圣保罗的模特训练课程，在一个百货大楼里被发掘。1996年，在西班牙举行的“世界小姐”选美大赛中，吉赛尔·邦辰获得第四名。1997年，吉赛尔·邦辰搬到了纽约，开始了自己的模特。",
                    imgSrc: require("../../assets/jisaier.jpg"),
                    imgSrc2: require("../../assets/jisaier2.jpg"),
                    imgSrc3: require("../../assets/jisaier3.jpg"),
                    name2: "吉赛尔·邦辰",
                    time2: "2021.10.1",
                    content2: "1993年，13岁的吉赛尔·邦辰参加了在圣保罗的模特训练课程，在一个百货大楼里被发掘。1996年，在西班牙举行的“世界小姐”选美大赛中，吉赛尔·邦辰获得第四名。1997年，吉赛尔·邦辰搬到了纽约，开始了自己的模特。",
                    imgSrc_1: require("../../assets/jisaier.jpg"),
                    imgSrc_2: require("../../assets/jisaier2.jpg"),
                    imgSrc_3: require("../../assets/jisaier3.jpg"),
                },{
                    name: "吉赛尔·邦辰",
                    time: "2021.10.1",
                    content: "1993年，13岁的吉赛尔·邦辰参加了在圣保罗的模特训练课程，在一个百货大楼里被发掘。1996年，在西班牙举行的“世界小姐”选美大赛中，吉赛尔·邦辰获得第四名。1997年，吉赛尔·邦辰搬到了纽约，开始了自己的模特。",
                    imgSrc: require("../../assets/jisaier.jpg"),
                    imgSrc2: require("../../assets/jisaier2.jpg"),
                    imgSrc3: require("../../assets/jisaier3.jpg"),
                    name2: "吉赛尔·邦辰",
                    time2: "2021.10.1",
                    content2: "1993年，13岁的吉赛尔·邦辰参加了在圣保罗的模特训练课程，在一个百货大楼里被发掘。1996年，在西班牙举行的“世界小姐”选美大赛中，吉赛尔·邦辰获得第四名。1997年，吉赛尔·邦辰搬到了纽约，开始了自己的模特。",
                    imgSrc_1: require("../../assets/jisaier.jpg"),
                    imgSrc_2: require("../../assets/jisaier2.jpg"),
                    imgSrc_3: require("../../assets/jisaier3.jpg"),
                },{
                    name: "吉赛尔·邦辰",
                    time: "2021.10.1",
                    content: "1993年，13岁的吉赛尔·邦辰参加了在圣保罗的模特训练课程，在一个百货大楼里被发掘。1996年，在西班牙举行的“世界小姐”选美大赛中，吉赛尔·邦辰获得第四名。1997年，吉赛尔·邦辰搬到了纽约，开始了自己的模特。",
                    imgSrc: require("../../assets/jisaier.jpg"),
                    imgSrc2: require("../../assets/jisaier2.jpg"),
                    imgSrc3: require("../../assets/jisaier3.jpg"),
                    name2: "吉赛尔·邦辰",
                    time2: "2021.10.1",
                    content2: "1993年，13岁的吉赛尔·邦辰参加了在圣保罗的模特训练课程，在一个百货大楼里被发掘。1996年，在西班牙举行的“世界小姐”选美大赛中，吉赛尔·邦辰获得第四名。1997年，吉赛尔·邦辰搬到了纽约，开始了自己的模特。",
                    imgSrc_1: require("../../assets/jisaier.jpg"),
                    imgSrc_2: require("../../assets/jisaier2.jpg"),
                    imgSrc_3: require("../../assets/jisaier3.jpg"),
                },{
                    name: "吉赛尔·邦辰",
                    time: "2021.10.1",
                    content: "1993年，13岁的吉赛尔·邦辰参加了在圣保罗的模特训练课程，在一个百货大楼里被发掘。1996年，在西班牙举行的“世界小姐”选美大赛中，吉赛尔·邦辰获得第四名。1997年，吉赛尔·邦辰搬到了纽约，开始了自己的模特。",
                    imgSrc: require("../../assets/jisaier.jpg"),
                    imgSrc2: require("../../assets/jisaier2.jpg"),
                    imgSrc3: require("../../assets/jisaier3.jpg"),
                    name2: "吉赛尔·邦辰",
                    time2: "2021.10.1",
                    content2: "1993年，13岁的吉赛尔·邦辰参加了在圣保罗的模特训练课程，在一个百货大楼里被发掘。1996年，在西班牙举行的“世界小姐”选美大赛中，吉赛尔·邦辰获得第四名。1997年，吉赛尔·邦辰搬到了纽约，开始了自己的模特。",
                    imgSrc_1: require("../../assets/jisaier.jpg"),
                    imgSrc_2: require("../../assets/jisaier2.jpg"),
                    imgSrc_3: require("../../assets/jisaier3.jpg"),
                }],
                countHeight: 2
            }
        },
        methods: {
            // 点击更多
            showMore() {
                if(this.countHeight < this.List.length) {
                    this.countHeight++
                }else {
                    this.countHeight == this.List.length
                }
                if(this.countHeight == this.List.length) {
                    this.$refs.more.style.display="none"
                }
            }
        }
    }
</script>
<style scoped>

    .page-more div {
        width: 120px;
        padding: 10px;
        box-sizing: border-box;
        border: 1px double #000;
        color: #000;
        cursor: pointer;
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        top: 5px;
    }
    .page-more div:hover {
        background: #000;
        color: #fff;
    }
    .page-more {
        width: 130px;
        height: 50px;
        border: 1px solid #000;
        position: relative;
        left: 50%;
        transform: translateX(-50%);
        bottom: 50px;
    }

    .page {
        width: 1300px;
        overflow-y: hidden;
        margin: 0 auto;
    }
    .box {
        height: 1099px;
        margin: 0 auto;
        margin-bottom: 170px;
    }
    /* 第二批 */
    .page-box2 {
        position: relative;
        margin-bottom: 190px;
    }
    .box-bg2 {
        width: 1100px;
        height: 430px;
        border: 1px solid #000;
        padding: 40px 810px 10px 10px;
        box-sizing: border-box;
        cursor: pointer;
    }
    .box-img2 {
        position: absolute;
        top: 40px;
        left: 310px;
        width: 900px;
        height: 430px;
        /* border: 1px solid #000; */
        cursor: pointer;
    }

    .list-box {
        width: 1045px;
        margin: 0 auto;
        margin-top: 350px;
    }
    .page-box {
        position: relative;
        margin-bottom: 190px;
    }
    .box-bg {
        width: 1100px;
        height: 430px;
        border: 1px solid #000;
        padding: 40px 10px 10px 810px;
        box-sizing: border-box;
        cursor: pointer;
        margin-left: 88px;
    }
    .box-bg h1, .box-bg2 h1 {
        font-weight: normal;
        font-family: "宋体";
        font-size: 30px;
        margin-bottom: 20px;
    }
    .box-bg h5, .box-bg2 h5 {
        font-weight: normal;
        font-family: "宋体";
        font-size: 14px;
        margin-bottom: 20px;
    }
    .box-bg p, .box-bg2 p {
        line-height: 40px;
    }
    .box-img {
        position: absolute;
        top: 40px;
        left: 6px;
        width: 900px;
        height: 430px;
        /* border: 1px solid #000; */
        cursor: pointer;
    }
    .box-img img, .box-img2 img {
        width: 32.6%;
        height: 422px;
        float: left;
        margin-right: .6%;
    }
    .box-img:hover+.box-bg, .box-bg:hover, .box-img2:hover+.box-bg2, .box-bg2:hover {
        background: #000;
        color: #fff;
    }
</style>